<template>
  <el-dialog
      v-model="dialogVisible"
      v-bind="$attrs"
  >
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="confirmOperation" size="large" >确定</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="large">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {computed, ref} from "vue";

defineOptions({
  name: 'FDialog',
  inheritAttrs: false
})
const props = withDefaults(defineProps<{
  modelValue: boolean
}>(),{
})
const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
  (e: 'confirmOperation'): void
}>()
const dialogVisible = computed({
  get() {
    return props.modelValue
  },
  set(val: boolean) {
    emit('update:modelValue', val)
  }
})

function confirmOperation() {
  dialogVisible.value = false
  emit('confirmOperation')
}
</script>

<style scoped lang="scss">
</style>

